<template>
	<view class="article-detail">
		<img :src="detailInfo.imgUrl" alt="">
		<view>
			<view class="title">{{ detailInfo.title || '' }}</view>
			<view class="subhead">{{ detailInfo.subTitle || '' }}</view>
			<rich-text class="content" :nodes="detailInfo.contents || ''"></rich-text>
			<text class="time">{{ detailInfo.createTime || '' }}</text>
		</view>
		<Loading ref="loading"></Loading>
	</view>
</template>

<script>
	import Loading from '@/components/loding.vue'
	import { request } from '@/utils/request.js'
	import { richTextImg } from '@/utils/utils.js'
	export default {
		data() {
			return {
				detailInfo: {}
			}
		},
		components: {
			Loading
		},
		methods: {

		},
		onLoad(option) {
			this.$refs.loading.init()
			this.$refs.loading.progress = 100
			// setTimeout(() => {
			// 	this.$refs.loading.destoryed()
			// }, 1000)
			uni.setNavigationBarTitle({
				title: option.title
			})
			request('/api/hlx-article/detail', {
				id: option.id
			}, 'get').then(res => {
				this.$refs.loading.destoryed()
				if (res.data.code === 200) {
					const resItem = res.data.data
					resItem.tags = resItem.introductions ? resItem.introductions.split(' ') : []
					resItem.dist = resItem.juli ? resItem.juli > 1000 ? `${resItem.juli / 1000} km` :
						`${resItem.juli} m` : ''
					resItem.contents = resItem.contents ? richTextImg(resItem.contents) : ''
					// resItem.createTime = '2021-09-08 21:21:21'
					this.detailInfo = resItem
				}
			})
		},
	}
</script>

<style lang="less" scoped>
.article-detail {
	> img {
		width: 750rpx;
		height: 372rpx;
	}
	> view {
		padding: 24rpx;
		.title {
			font-size: 32rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 500;
			color: #333333;
			line-height: 35rpx;
		}
		.subhead {
			font-size: 28rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			line-height: 32rpx;
			margin: 32rpx 0;
		}
		.content {
			font-size: 28rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			color: #000000;
			line-height: 48rpx;
		}
		.time {
			font-size: 24rpx;
			font-family: Source Han Sans CN, Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			line-height: 48rpx;
		}
	}
}
</style>